<template>
  <div>
    <div class="filter-all">
      <div
        class="filter-list"
        v-for="routerItem in routerList"
        :key="routerItem.featuresId"
        :class="{ filterClass: filterId == routerItem.featuresId }"
        @click="changefil(routerItem)"
      >
        <router-link
          :to="{
            name: 'allFeatures',
            query: {
              titleId: $route.query.titleId,
              busTypeId: $route.query.busTypeId,
              featuresId: routerItem.featuresId,
              pageNum: 1,
            },
          }"
          >{{ routerItem.name }}</router-link
        >
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  data() {
    return {
      activeIndex: "1",
      activeIndex2: "1",
      // routerList: [
      //   { featuresId: 0, name: "全部特性" },
      //   { featuresId: 1, name: "JS UI" },
      //   { featuresId: 2, name: "多模输入" },
      // ],
      // filterListBtn: [
      //   //过滤
      //   { id: 0, val: "全部特性" },
      //   { id: 1, val: "JS UI" },
      //   { id: 2, val: "多模输入" },
      // ],
      filterId: 0,
      titleId: 1,
      busTypeId: 1,
      osVersionId: [],
      osTypeId: []
    };
  },
  created() {},
  computed: {
    ...mapState({
      routerList: (state) => state.initData.featuresList,
      pageNo: (state) => state.initData.pageNum,
      pageSize: (state) => state.initData.pageSize,
    }),
  },
  methods: {
    ...mapActions(["getInitData"]),
    async searchAll(featuresId) {
      if (this.$route.query.titleId) {
        this.titleId = this.$route.query.titleId;
      }
      if (this.$route.query.busTypeId) {
        this.busTypeId = this.$route.query.busTypeId;
      }
      if (this.$route.query.osTypeId) {
        this.osTypeId = this.$route.query.osTypeId;
      }
      if (this.$route.query.osVersionId) {
        this.osVersionId = this.$route.query.osVersionId;
      }
      let res = await this.$axios.get(
        "/knowledge/frontPage/queryInitialization",
        {
          params: {
            titleId: this.titleId,
            busTypeId: this.busTypeId,
            osTypeId: this.osTypeId,
            osVersionId: this.osVersionId,
            pageNum: this.pageNo,
            pageSize: this.pageSize,
          },
        }
      );
      if (this.filterId != 0) {
        if (this.$route.query.titleId) {
          this.titleId = this.$route.query.titleId;
        }
        if (this.$route.query.busTypeId) {
          this.busTypeId = this.$route.query.busTypeId;
        }
        // let featuresId = this.$route.query.featuresId;
        console.log("*********", this.$route.query);
        res = await this.$axios.get(
          "/knowledge/frontPage/queryInitialization",
          {
            params: {
              featuresId: this.filterId,
              busTypeId: this.busTypeId,
              titleId: this.titleId,
              pageNum: this.pageNo,
              pageSize: this.pageSize,
            },
          }
        );
      }
      if (res.data.code == 0) {
        let busTypeList = res.data.data.busTypeList;
        let featuresList = res.data.data.featuresList;
        let sampleList = res.data.data.sampleList;
        let titleList = res.data.data.titleList;
        let osTypeList = res.data.data.osTypeList;
        let osVersionList = res.data.data.osVersionList;
        let totalNum = res.data.totalNum;
        this.getInitData({
          busTypeList,
          featuresList,
          sampleList,
          titleList,
          osTypeList,
          osVersionList,
          totalNum,
        });
      }
    },
    changefil(item) {
      this.filterId = item.featuresId;
      this.searchAll(item.featuresId);
    },
    changeTag(item) {
      console.log(item.id);
    },
    beackRouter(routeItem) {
      let id = -routeItem.id;
      console.log(id, routeItem.id);
      // this.$router.go();
    },
    // 面包线获取
  },
};
</script>
<style lang="less" scoped>
.filter-all {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 25%;
  .filter-list {
    width: 100%;
    height: 31px;
    background: #f3f3f3;
    border-radius: 18px;
    margin-top: 32px;
    margin-bottom: 30px;
    padding: 0 20px;
    line-height: 31px;
    text-align: center;
    font-size: 14px;
    margin-right: 10px;
    ::v-deep a {
      color: #000000;
    }
    a {
      line-height: 31px;
      text-decoration: none;
      display: inline-block;
      height: inherit;
      width: inherit;
    }
  }
  .filterClass {
    border: 1px solid #328dff;
    ::v-deep a {
      height: 31px;
      font-size: 14px;
      font-family: HarmonyOS_Sans_SC_Medium;
      color: #328dff;
      line-height: 31px;
    }

    // font-size: 16px;
    // font-family: HarmonyOS_Sans_SC_Bold;
    // color: #0b226d;
    // background: #26e7f4;
    // border-radius: 27px;
    // border: 1px solid #26e7f4;
  }
}

@media screen and (max-width: 540px) {
  .filter-all {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    height: 63px;
    margin: 16px 0;
    // width: 25%;
    .filter-list {
      width: 100%;
      height: 31px;
      background: #f3f3f3;
      border-radius: 18px;
      margin-top: 16px;
      margin-bottom: 16px;
      margin: 0 12px;
      line-height: 31px;
      text-align: center;
      font-size: 14px;
      margin-right: 10px;
      ::v-deep a {
        color: #000000;
      }
      a {
        line-height: 31px;
        text-decoration: none;
        display: inline-block;
        height: inherit;
        width: inherit;
      }
    }
    .filterClass {
      border: 1px solid #328dff;
      ::v-deep a {
        height: 31px;
        font-size: 14px;
        font-family: HarmonyOS_Sans_SC_Medium;
        color: #328dff;
        line-height: 31px;
      }
    }
  }
}
</style>
